<template>
    <div class="homePageTop">
        <!-- 搜索导航栏 -->
        <div class="search">

            <van-nav-bar right-text="登录" @click-right="onClickLogin">
                <template #left>
                    <router-link to="/home" class="logo"></router-link>
                </template>
                <template #title>
                    <van-search placeholder="搜索商品, 共119551款好物" @focus="onClickSearch" />
                </template>
            </van-nav-bar>

        </div>
        <!-- 分类栏 -->
        <div class="sort">
            <van-tabs v-model="active" sticky>
                <van-tab title="推荐">
                    <template #default>
                        <homePageBanner></homePageBanner>
                        <homePageList></homePageList>
                        <newcomerGift></newcomerGift>
                        <hotSale></hotSale>
                        <homePageBottom></homePageBottom>
                    </template>
                </van-tab>


                <van-tab title="居家生活">
                    <template #default>
                        <van-swipe :autoplay="3000">
                            <van-swipe-item v-for="(image, index) in images" :key="index">
                                <img v-lazy="image.img" />
                            </van-swipe-item>
                        </van-swipe>
                        <sortPageLive></sortPageLive>
                    </template>
                </van-tab>

                <van-tab title="服饰鞋包">
                    <template #default>
                        <van-swipe :autoplay="3000">
                            <van-swipe-item v-for="(image, index) in imagetwo" :key="index">
                                <img v-lazy="image.img" />
                            </van-swipe-item>
                        </van-swipe>
                        <sortPageClothes></sortPageClothes>
                    </template>
                </van-tab>
                <van-tab title="美食酒水">
                    <template #default>
                        <homePageBanner></homePageBanner>
                        <sortPageFoods></sortPageFoods>
                    </template>
                </van-tab>
                <van-tab title="个护清洁">
                    <template #default>
                        <homePageBanner></homePageBanner>
                        <sortPageFoods></sortPageFoods>
                    </template>
                </van-tab>
                <van-tab title="母婴亲子">
                    <template #default>
                        <homePageBanner></homePageBanner>
                        <sortPageFoods></sortPageFoods>
                    </template>
                </van-tab>
                <van-tab title="运动旅行">
                    <template #default>
                        <homePageBanner></homePageBanner>
                        <sortPageFoods></sortPageFoods>
                    </template>
                </van-tab>
                <van-tab title="数码家电">
                    <template #default>
                        <homePageBanner></homePageBanner>
                        <sortPageClothes></sortPageClothes>
                    </template>
                </van-tab>
                <van-tab title="严选全球">
                    <template #default>
                        <homePageBanner></homePageBanner>
                        <sortPageClothes></sortPageClothes>
                    </template>
                </van-tab>

            </van-tabs>


            <!-- <van-icon name="arrow-down"  class="xiajiantou"/> -->
        </div>
        <AllCom />
    </div>
</template>

<script>
import sortPageLive from './sortPagelive.vue'
import sortPageClothes from './sortPageClothes.vue'
import sortPageFoods from './sortPageFoods.vue'
// 首页推荐组件
import homePageBanner from './homePageBanner.vue'
import homePageList from './homePageList.vue'
import newcomerGift from './ newcomerGift.vue'
import hotSale from './hotSale.vue'
import homePageBottom from './homePageBottom.vue'


import service from '../../../request/service'

import { Toast } from 'vant';
export default {
    components: {
        homePageBanner, homePageList, newcomerGift, hotSale, homePageBottom,

        sortPageLive, sortPageClothes, sortPageFoods
    },
    data() {
        return {
            active: 0,
            images:[],
            imagetwo:[]
        }
    },
    methods: {
        onClickLogin() {
            this.$router.push('/my')
        },
        onClickSearch() {
            this.$router.push('/search')
            // },
            // onClickSort(name,title){
            //     if(name==0){
            //         this.$router.push('./home')
            //     }else if(name==1){
            //         this.$router.push('./live')
            //     }else if(name==2){
            //         this.$router.push('./clothes')
            //     }else if(name==3){
            //         this.$router.push('./foods')
            //     }else if(name==4){
            //         this.$router.push('./clean')
            //     }else if(name==5){
            //         this.$router.push('./baby')
            //     }else if(name==6){
            //         this.$router.push('./sports')
            //     }else if(name==7){
            //         this.$router.push('./camera')
            //     }else if(name==8){
            //         this.$router.push('./global')
            //     }
        }
    },
    mounted(){
        service({
            url: 'http://localhost:3000/classify',
            method: 'get',
        }).then(res => {
            this.images = res.data

        });
        service({
            url: 'api/banner/list',
            method: 'get',
        }).then(res => {
            this.imagetwo = res.data.data

        });
        
    }
};

</script>

<style >

.homePageTop .van-swipe img{
width:100%
}
.homePageTop .van-swipe__track{
    height: 143px;
}
.homePageTop .search {
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
    background-color: #FFF;
}


.homePageTop .van-nav-bar__content {
    width: 100%;
    box-sizing: content-box;
}


.homePageTop .logo {
    background-image: url(../images/spirit.png);
    width: 4.48rem;
    height: 1.3rem;
    background-position: -28rem -47.6rem;
    background-size: 12rem 12.22rem;
}


.homePageTop .van-sticky--fixed {
    top: 2.875rem;
}


.homePageTop .van-nav-bar__title {
    max-width: 60%;
}

.homePageTop .van-icon-search:before {
    color: #666;
}

.homePageTop .van-nav-bar .van-icon {
    line-height: 1rem;
}

.homePageTop .van-field__left-icon .van-search {
    width: 15rem;
    line-height: initial;
}

/* //rem除以2,显示会大一倍 */

.homePageTop .van-nav-bar__right .van-nav-bar__text {
    width: 2.625rem;
    height: 1.5rem;
    line-height: 1.5rem;
    border: .0625rem solid #dd1a21;
    border-radius: 0.625rem;
    color: #dd1a21;
}

.homePageTop .van-search .van-search__content {
    border-radius: .4375rem;
    width: 13.875rem;
    height: 1.75rem;
}

.homePageTop .van-field__body .van-field__control {

    line-height: .625rem;
}

/* 分类样式 */
.homePageTop .sort {
    position: relative;
    width: 100%;
    /* margin-top: 3rem; */
}

.homePageTop .sort .xiajiantou {
    display: inline-block;
    width: 3.375rem;
    height: 1.875rem;
    position: absolute;
    top: 0.625rem;
    right: 0;
    text-align: center;
    /* //使用了透明度: */
    background: linear-gradient(to right, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 1));
}

.homePageTop .van-nav-bar__left,
.homePageTop .van-nav-bar__right {
    padding: 0;
}

.homePageTop .van-tabs__nav--complete {
    width: 100%;
    box-sizing: border-box;
}

.homePageTop .van-tabs__wrap .van-tab {
    padding: 0 1.34rem;
}
</style>